<!DOCTYPE html>
<html lang="zh">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>三级联动</title>
    <style>
        


    </style>
</head>
<body>
    <select name="" id="province">
        <option value="">请选择省份</option>
    </select>
    <select name="" id="city">
        <option value="">请选择城市</option>
    </select>
    <select name="" id="area">
        <option value="">请选择区域</option>
    </select>
    

    
    <script>


        let  province = document.getElementById("province");
        let city = document.getElementById("city");
        let area = document.getElementById("area");
        let arr;

        // console.log(province);

        fetch("./city.json").then(function(response){
            return response.json();
        }).then(function(data){
            console.log(data);
            for(let key in data) {
                console.log(key);
                province.innerHTML+=`<option value="">${key}</option>`
            }
            province.addEventListener("change",function(){
                // let cityV = city.value;
                for (let key in data) {
                   
                    // if (cityV==key) {
                    //     for (let i in data[key]) {
                    //         arr = data[key];
                    //         console.log(i);
                    //         city.innerHTML=`<option value="">${i}</option>`
                    //     }
                    // }
                }
            })
        }).catch(function(err) {
            console.log(err);
        });

        
        

       



    </script>
</body>
</html>